<template lang="pug">
.page-video.app-container
  #video-main(v-show="state.isShow")
</template>

<script setup>
// 视频插件
import Player from 'xgplayer'

import loginBg from '../../assets/images/login_bg.jpg'

import { reactive, getCurrentInstance, onUnmounted } from 'vue'

const { proxy } = getCurrentInstance() // 内部组件实例

const state = reactive({
  player: '',
  isShow: false
})

proxy.$nextTick(() => {
  state.player = new Player({
    id: 'video-main',
    autoplay: false,
    url: 'http://oss.linxiaming.cn/video/20210714/mp.mp4',
    poster: loginBg, // 背景图
    volume: 0.2,
    playbackRate: [0.5, 0.75, 1, 1.5, 2], // 传入倍速可选数组
    defaultPlaybackRate: 1
  })

  state.player.once('ready', () => { state.isShow = true })
  // 音量发生改变
  state.player.on('volumechange', function (e) {})
})

onUnmounted(() => {
  // 销毁播发器
  state.player.destroy()
})
</script>

<style lang="scss">
  .page-video {
    #video-main {
      width: 100%!important;
      max-width: 600px;
    }
  }
</style>
